<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-select v-model="listQuery.shopId" clearable class="filter-item" :placeholder="$t('请选择门店')">
          <el-option v-for="item in shops" :value="item.id" :label="item.name"></el-option>
      </el-select>
      <!-- <el-select v-model="listQuery.categoryl3" clearable class="filter-item" :placeholder="$t('Category_Level_3')"> -->
      <!-- <el-select v-model="listQuery.categoryl3" clearable class="filter-item" :placeholder="$t('Category_Level_3')"> -->
        <!-- <el-option v-for="item in categoryl3s" :value="item.id" :label="item.name"></el-option> -->
        <!-- <el-cascader :options="categoryList" v-model="categoryIds" expand-trigger="hover" @change="handleCategoryChange" :placeholder="$t('请选择')"/> -->
      <el-cascader v-model="listQuery.categoryl3" class="filter-item" clearable :options="categoryList" expand-trigger="hover" @change="handleCategoryChange" :placeholder="$t('Category_Level_3')" :show-all-levels="false"></el-cascader>
      <!-- </el-select> -->
      <el-input v-model="listQuery.goodsSn" clearable class="filter-item" style="width: 200px;" :placeholder="$t('Please_enter_merchandise_ID')"/>
      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 200px;" :placeholder="$t('Please_enter_merchandise_name')"/>
      <el-button class="filter-item" type="info" icon="el-icon-search" @click="handleFilter">{{$t('Search')}}</el-button>
      <el-button v-permission="['GET /admin/p/goods_goods_add']" class="filter-item" type="warning" icon="el-icon-circle-plus" @click="handleCreate">{{$t('Add')}}</el-button>
<!--      <el-button v-permission="['GET /admin/p/goods_goods_accessories']" class="filter-item" @click="getGoodsAccessoryList" type="primary" icon="el-icon-fork-spoon" >{{$t('商品辅料')}}</el-button>-->
    </div>
    <el-drawer
      :visible.sync="drawer"
      direction="ltr"
      size="90%"
      :before-close="handleClose">
      <div  class="filter-container" style="width: 67%;margin: auto">
        <el-row>
          <el-button type="danger"
                     v-permission="['GET /admin/p/goods_goods_accessoriesdelete']"
                     @click="handleBatchesRemoveDelete"
                     :disabled="multipleSelection.length === 0"
                     icon="el-icon-delete">{{$t('批量删除')}}
          </el-button>
          <el-input style="width: 180px;" :placeholder="$t('请输入商品')" suffix-icon="el-icon-coffee" v-model="goodsAccessoryQuery.goodsName"></el-input>
          <el-input style="width: 180px;" :placeholder="$t('请输入辅料名')" suffix-icon="el-icon-knife-fork" v-model="goodsAccessoryQuery.groupName"></el-input>
          <el-input style="width: 180px;" size="medium" :placeholder="$t('请输入辅料组名')" suffix-icon="el-icon-s-grid" v-model="goodsAccessoryQuery.name"></el-input>
          <el-button type="info" @click="getGoodsAccessoryList" plain1 icon="el-icon-search" ></el-button>
        </el-row>
      </div>
      <el-table
        v-loading="goodsAccessoryListLoading"
        @selection-change="handleSelectionChange"
        :element-loading-text="$t('拼命加载中')"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.5)"
        @row-click="handleRowClick"
        ref="handSelectTest_multipleTable"
        :data="goodsAccessoryQuery.list"
        stripe border
        style="width: 95%;margin: auto">
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55">
        </el-table-column>
        <el-table-column align="center" prop="name" :label="$t('辅料名')" width="180">
          <template slot-scope="scope">
            <el-tag type="success">{{scope.row.name}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="goodsName" :label="$t('商品名称')" width="180"></el-table-column>
        <el-table-column align="center" prop="merchandiseName" :label="$t('货品名称')" width="180"></el-table-column>
        <el-table-column align="center" prop="groupName" :label="$t('辅料组名')" width="180"></el-table-column>
        <el-table-column align="center" prop="groupNameEn" :label="$t('辅料英文名')" width="180">
          <template slot-scope="scope">
            {{scope.row.groupNameEn==null?'--- --- --- ---':scope.row.groupNameEn}}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="number" width="200" :label="$t('份数量')"></el-table-column>
        <el-table-column align="center" prop="price" :label="$t('价格')"></el-table-column>
        <el-table-column align="center" prop="consumeRatio" width="200" :label="$t('原料消耗系数')"></el-table-column>
        <el-table-column align="center" prop="costType" width="180" :label="$t('计费类型(0:次(按次计费只需增加一次费用),1:份)')"></el-table-column>
        <el-table-column sortable align="center" prop="addTime" width="200" :label="$t('添加时间')"></el-table-column>
        <el-table-column align="center" prop="muchContent" :label="$t('多加--分量')"></el-table-column>
        <el-table-column align="center" prop="fewContent" :label="$t('少许--分量')"></el-table-column>
        <el-table-column v-permission="['GET /admin/p/goods_goods_accessoriesdelete']" align="center" :label="$t('Operate')" width="200" fixed="right" class-name="small-padding fixed-width">
          <template slot="header" slot-scope="{row}">
            {{$t('Operate')}}
            <i class="el-icon-s-tools" style="color: #d35e32"></i>
          </template>
          <template slot-scope="scope">
            <el-row >
              <el-button v-permission="['GET /admin/p/goods_goods_accessoriesdelete']" class="filter-item" type="danger" icon="el-icon-delete" @click="handleGoodsAccessoryDelete(scope.row)">{{$t('辅料删除')}}</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="goodsAccessoryQuery.total>0" :total="goodsAccessoryQuery.total" :page.sync="goodsAccessoryQuery.page" :limit.sync="goodsAccessoryQuery.limit" @pagination="getGoodsAccessoryList" />
    </el-drawer>
    <!-- 查询结果 -->
    <el-table @cell-dblclick="dblclick" v-loading="listLoading" :data="list" :element-loading-text="$t('Searching')" height="700" fit highlight-current-row
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column type="index" :index="getIndex" width="50"></el-table-column>

      <el-table-column align="center" :label="$t('Store')" prop="shopName">
        <template slot-scope="scope">
          <el-tag>
            {{getShopName(scope.row.shopId)}}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" min-width="120" :label="$t('Name')" prop="name">
        <template slot-scope="scope">
          <el-link  :underline="false" v-if="!scope.row.editable"> {{ scope.row.name }} </el-link>
        </template>
      </el-table-column>

      <el-table-column align="center" property="iconUrl" :label="$t('Picture')">
        <template slot-scope="scope">
          <el-popover placement="right" trigger="click">
            <el-image style="width: 300px;border-radius: 5px" :src="scope.row.picUrl" fit="contain"></el-image>
            <el-image slot="reference" :preview-src="scope.row.picUrl" style="border-radius:15%;width:80px" :src="scope.row.picUrl"  width="20">
              <div slot="error" class="image-slot">
                <i style="font-size: 60px" class="el-icon-picture"></i>
              </div>
            </el-image>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Merchandise_code')" prop="goodsSn"/>

      <el-table-column align="center" :label="$t('Category')" prop="categoryName"  width="200"/>
      <el-table-column align="center" :label="$t('Sort')" prop="sort">
        <template slot-scope="scope">
          <!-- 根据 editable 属性显示输入框或文本 -->
          <span v-if="!scope.row.editable">{{ scope.row.sort }}</span>
          <el-input oninput="value=value.replace(/[^\d]/g,'')" v-else v-model="scope.row.sort" @blur="handleInputBlur(scope.row)" @input="handleInput(scope.row)"></el-input>
        </template>
      </el-table-column>




      <el-table-column align="center" :label="$t('Label')">
        <template slot-scope="scope">
          <div v-show="scope.row.reviewType==2||scope.row.reviewType==1">
            <el-row>
              <span>{{$t('Launch')}}:</span>
              <el-switch v-model="scope.row.isOnSale" @change="handlePush(scope.row)" :active-value="true" :nactive-value="false" />
            </el-row>
            <el-row>
              <span>{{$t('New_product')}}:</span>
              <el-switch v-model="scope.row.isNew"  @change="handleNewProduce(scope.row)"  :active-value="true" :nactive-value="false" />
            </el-row>
            <el-row>
              <span>{{$t('Recommendation')}}:</span>
              <el-switch v-model="scope.row.isHot" @change="handleRecommend(scope.row)"  :active-value="true" :nactive-value="false" />
            </el-row>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Launch_time')" prop="updateTime">
        <template slot-scope="scope">
          <span v-show="scope.row.isOnSale">{{scope.row.updateTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Sales')" prop="sales" >
        <template slot="header" slot-scope="{row}">
          {{$t('Sales')}}
          <i class="el-icon-star-on" style="color: red"></i>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Review_Status')" prop="reviewType">
        <template slot="header" slot-scope="{row}">
          {{$t('Review_Status')}}
          <i class="el-icon-warning" style="color: #fdd077"></i>
        </template>
        <template slot-scope="scope">
          <el-link :underline="false" :type="reviewFilter(scope.row.reviewType).status">{{ reviewFilter(scope.row.reviewType).label  }}</el-link>
        </template>
      </el-table-column>

      <el-table-column align="center" :label="$t('Operate')" width="200" class-name="small-padding fixed-width">
        <template slot="header" slot-scope="{row}">
          {{$t('Operate')}}
          <i class="el-icon-s-tools" style="color: #d35e32"></i>
        </template>
        <template slot-scope="scope">
          <el-row>
            <el-button v-shop="false" v-permission="['GET /admin/p/goods_goods_apply']" type="primary"  icon="el-icon-document-checked" size="mini" :disabled="isShowReview(scope.row.reviewType)" @click="handleReview(scope.row)">{{scope.row.reviewType==3?$t('重审'):$t('Review')}}</el-button>
            <el-button v-permission="['GET /admin/p/goods_goods_log']" type="warning" icon="el-icon-date"  size="mini" @click="handleLog(scope.row)">{{$t('Journal')}}</el-button>
          </el-row>
          <el-row style="margin-top: 5px;">
            <el-button v-permission="['GET /admin/p/goods_goods_detail']" type="info" icon="el-icon-view"  size="mini" @click="handleUpdate(scope.row)">{{$t('Details')}}</el-button>
            <el-button v-permission="['GET /admin/p/goods_goods_delete']" type="danger" icon="el-icon-delete"  size="mini" @click="handleDelete(scope.row)">{{$t('Delete')}}</el-button>
          </el-row>
          <el-row style="margin-top: 5px;">
            <!-- <el-button v-permission="['GET /admin/goods/allPrice']" type="info" size="mini" @click="getPriceDetail(scope.row)">{{$t('Price')}}</el-button> -->
            <el-button v-permission="['GET /admin/p/goods_goods_copy']" v-if="!(scope.row.shopId)" type="primary" icon="el-icon-copy-document"  size="mini" @click="handleCopy(scope.row)">{{$t('Copy')}}</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-tooltip placement="top" :content="$t('Back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>

    <el-dialog :visible.sync="reviewDialogVisiable" :title="$t('Merchandise_Review')">
      <el-form ref="reviewForm" :model="reviewForm" status-icon label-position="left" label-width="100px">
        <el-form-item :label="$t('Merchandise_name')" prop="goodsName">
          <el-input v-model="reviewForm.goodsName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item :label="$t('Notes_info')" prop="content">
          <el-input type="textarea" v-model="reviewForm.content"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reviewDialogVisiable = false">{{$t('Cancel')}}</el-button>
        <el-button @click="reviewHandleReject()" type="danger">{{$t('Not_passed')}}</el-button>
        <el-button @click="reviewHandlePass()" type="primary">{{$t('Passed')}}</el-button>
      </div>
    </el-dialog>


    <el-dialog :visible.sync="priceDialogVisiable" :title="$t('Merchandise_Price')">
      <el-form ref="priceForm" :model="priceForm" status-icon label-position="left" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item :label="$t('Merchandise_name')" prop="goodsName">
              <el-col>{{priceForm.goodsName}}</el-col>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('Merchandise_Price')" prop="goodsSellPrice">
              <el-input v-model="priceForm.goodsSellPrice"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" align="center">
              <el-button type="primary" size="mini" @click="handleUpdatePrice">{{$t('Renew')}}</el-button>
          </el-col>
        </el-row>
        <el-row  v-for="item in priceForm.specifications">
          <el-col :span="8">
            <el-form-item :label="$t('Goods_specifications')" prop="value">
              <el-col>{{item.value}}</el-col>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="$t('Cost_outside_of_specification')" prop="price">
              <el-input v-model="item.price"/>
            </el-form-item>
          </el-col>
          <el-col :span="8" align="center">
            <el-button type="primary" size="mini" @click="handleUpdateSpecPrice(item)">{{$t('Renew')}}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-card class="el-card">
        <div slot="header" class="clearfix">
          <span>{{$t('Discounts')}}</span>
          <el-button style="float: right;" type="primary" @click="handleUpdateDiscountPrice">{{$t('Update_Discounts')}}</el-button>
        </div>
        <el-tabs :value="priceForm.priceType" @tab-click="handleTabSwitch" tab-position="top">
          <el-tab-pane :label="$t('Member_costs')" name="1">
            <el-form ref="vipPriceForm" :rules="rules" :model="priceForm.vipPriceForm" label-width="150px">
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('Silver_Membership')" prop="silverVipPrice">
                    <el-input v-model="priceForm.vipPriceForm.silverVipPrice">
                      <template slot="append">{{$t('Dollars')}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('Silver_Membership')" prop="goldVipPrice">
                    <el-input v-model="priceForm.vipPriceForm.goldVipPrice">
                      <template slot="append">{{$t('Dollars')}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item :label="$t('Platinum_Membership')" prop="platinumVipPrice">
                    <el-input v-model="priceForm.vipPriceForm.platinumVipPrice">
                      <template slot="append">{{$t('Dollars')}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item :label="$t('Diamond_Membership')" prop="diamondVipPrice">
                    <el-input v-model="priceForm.vipPriceForm.diamondVipPrice">
                      <template slot="append">{{$t('Dollars')}}</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane :label="$t('Staircase_pricing')" name="2">
            <el-table :data="priceForm.stepPriceForms" border fit highlight-current-row>
              <el-table-column align="center" :label="$t('Number')" prop="number">
                <template slot-scope="scope">
                  <el-input v-model="priceForm.stepPriceForms[scope.$index].number"/>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('Price')" prop="price">
                <template slot-scope="scope">
                  <el-input v-model="priceForm.stepPriceForms[scope.$index].price">
                    <template slot="append">{{$t('Dollars')}}</template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('Operate')">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleStepAdd(scope.row)">增加</el-button>
                  <el-button type="danger" size="mini" @click="handleStepDelete(scope)">{{$t('Delete')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane :label="$t('Full_Discount')"  name="3" >
            <el-table :data="priceForm.moneyOfPriceForms" border fit highlight-current-row>
              <el-table-column align="center" :label="$t('Full')" prop="minusPrice">
                <template slot-scope="scope">
                  <el-input v-model="priceForm.moneyOfPriceForms[scope.$index].minusPrice">
                    <template slot="append">{{$t('Dollars')}}</template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('Immediate_Discount')" prop="maxPrice">
                <template slot-scope="scope">
                  <el-input v-model="priceForm.moneyOfPriceForms[scope.$index].maxPrice">
                    <template slot="append">{{$t('Dollars')}}</template>
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column align="center" :label="$t('Operate')">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleMoneyOfAdd(scope.row)">增加</el-button>
                  <el-button type="danger" size="mini" @click="handleMoneyOfDelete(scope)">{{$t('Delete')}}</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <div slot="footer" class="dialog-footer">
        <el-button @click="clearPriceForm">{{$t('Cancel')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="storeDialogVisiable" :title="$t('Merchandise_stock')">
      <el-form ref="priceForm" :model="storeForm" :rules="storeRules" status-icon label-position="left" label-width="100px">
        <el-form-item :label="$t('Merchandise_name')" prop="goodsName">
          <el-col>{{storeForm.goodsName}}</el-col>
        </el-form-item>

        <el-form-item :label="$t('Merchandise_stock')" prop="number">
          <el-input v-model.number="storeForm.number"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="storeDialogVisiable = false">{{$t('Cancel')}}</el-button>
        <el-button @click="handleUpdateStore" type="primary">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="productDialogVisiable" :title="$t('Merchandise_stock')">
      <el-form ref="productForm" :model="productForm" :rules="productRules" status-icon label-position="left" label-width="100px">
        <el-form-item :label="$t('Merchandise_name')" prop="goodsName">
          <el-col>{{productForm.goodsName}}</el-col>
        </el-form-item>

        <el-form-item :label="$t('Merchandise_stock')" prop="number">
          <el-input v-model.number="productForm.number"/>
        </el-form-item>
        <el-form-item :label="$t('Merchandise_sale_price')" prop="sellPrice">
          <el-input v-model.number="productForm.sellPrice">
            <template slot="append">{{$t('Dollars')}}</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Cost_of_merchandise')" prop="costPrice">
          <el-input v-model="productForm.costPrice">
            <template slot="append">{{$t('Dollars')}}</template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('Merchandise_warning')" prop="earlyWarningValue">
          <el-input v-model.number="productForm.earlyWarningValue"/>
        </el-form-item>
        <el-row>
          <el-form-item :label="$t('税费')" prop="taxes">
            <el-col v-for="item in taxes" :span="8">
              <el-row>
                <el-form-item :label="''" prop="tax">
                  <el-checkbox  v-model="item.enable">
                    {{ filterTaxType(item.type)}}
                  </el-checkbox>
                </el-form-item>
              </el-row>
            </el-col>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="productDialogVisiable = false">{{$t('Cancel')}}</el-button>
        <el-button @click="handleUpdateProduct" type="primary">{{$t('Confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { categoryl3,updateGoods,listGoods, deleteGoods, approveGoods, rejectGoods, pushGoods, newProductGoods, recommendGoods, updatePriceGoods, updateSpecPriceGoods, getAllPriceGoods, updateStoreGoods, updateGoodsDiscountPrice, readGoodsProduct, updateGoodsProduct, addGoodsProduct, goodsCopy ,goodsAccessorylist,goodsAccessoryRemove,goodsAccessoryBatchesRemove} from '@/api/goods'
import BackToTop from '@/components/BackToTop'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { Loading } from 'element-ui'
import { allForPerm } from '@/api/shop'
import checkPermission from '@/utils/permission'
import ElColorAlphaSlider from "element-ui/packages/color-picker/src/components/alpha-slider";
import { goodsAccessoryList} from "../../api/goods";

export default {
  name: 'GoodsList',
  components: {ElColorAlphaSlider, BackToTop, Pagination },
  filters: {

  },
  data() {
    const reviewMap = {
      1: {label:this.$t('待审核'),status:'info'},
      2: {label:this.$t('已通过'),status:'success'},
      3: {label:this.$t('Denied'),status:'danger'}
    }
    const validateDouble = (rule, value, callback) => {
      // console.log('value' + value)
      if (!value || !/^[0-9,.]*$/.test(value)) {
        callback(new Error(this.$t('Sale_price_must_be_a_number')))
      } else {
        callback()
      }
    }
    return {
      categoryList: [],
      categoryIds: [],
      categoryl3s:[],
      multipleSelection:[],
      goodsAccessoryListLoading:true,
      reviewMap,
      rules: {
        goodsSn: [
          { required: true, message: this.$t('Merchandise_ID_must_not_be_empty'), trigger: 'blur' }
        ],
        name: [{ required: true, message: this.$t('Merchandise_name_must_not_be_empty'), trigger: 'blur' }]
      },
      goodsAccessoryQuery:{
        total:1,
        page:1,
        limit:20,
        groupName:'',
        goodsName:'',
        name:'',
        list:[]
      },
      drawer: false,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        shopId: undefined,
        goodsSn: undefined,
        type: 0,
        name: undefined,
        categoryl3:'',
        sort: 'add_time',
        order: 'desc'
      },
      reviewForm:{
        id:undefined,
        goodsSn:undefined,
        goodsName:undefined,
        content:undefined,
        type:undefined
      },
      goodsDetail: '',
      detailDialogVisible: false,
      downloadLoading: false,
      reviewDialogVisiable:false,
      shops:[],
      priceDialogVisiable:false,
      priceForm: {
        id: undefined,
        goodsName: undefined,
        goodsSellPrice: undefined,
        priceType: '1',
        specifications: [],
        vipPriceForm:{},
        stepPriceForms:[{}],
        moneyOfPriceForms:[{}],
      },
      storeDialogVisiable: false,
      storeForm: {
        id: undefined,
        number: undefined
      },
      storeRules: {
        number: [
          { required: true, message: this.$t('Stock_amount_cannot_be_empty'), trigger: 'blur' },
          { type: 'number', message: this.$t('Stock_amount_must_be_a_number') }
        ]
      },

      productDialogVisiable: false,
      productForm: {
        taxTypes: [],
      },
      productRules:{
        number: [
          { required: true, message: this.$t('Stock_amount_cannot_be_empty'), trigger: 'blur' },
          { type: 'number', message: this.$t('Stock_amount_must_be_a_number'), trigger: 'blur' }
        ],
        sellPrice: [{ required: true, message: this.$t('Sale_price_cannot_be_empty'), trigger: 'change' },
          { required: true,validator: validateDouble, trigger: 'change' }],
        costPrice: [{ required: true, message: this.$t('Buy-in_cost_cannot_be_empty'), trigger: 'change' },
          { required: true,validator: validateDouble, trigger: 'change' }],
      },
      taxes:[{
        value:0,
        type:1,
        enable:false
      },{
        value:0,
        type:2,
        enable:false
      },{
        value:0,
        type:3,
        enable:false
      }],
    }
  },
  created() {
    this.getList()
    categoryl3().then(res=>{
      this.categoryl3s=res.data.data
      this.categoryList = res.data.data
    })
    allForPerm().then(response=>{
      this.shops = response.data.data.list
    })
  },
  methods: {

    //双击单元格
    dblclick(row, column, cell, event){
      // 将当前单元格的 editable 属性设置为 true

      row.editable = !row.editable;
      if(!row.editable){
        this.handleInputBlur(row)
      }
      // 获取当前单元格的输入框并聚焦
      this.$nextTick(() => {
        const inputEl = cell.querySelector('.el-input__inner');
        if (inputEl) {
          inputEl.focus();
        }
      });
    },
    handleInput(row) {
      // 实时更新当前单元格的值
      row.goodsSn = row.goodsSn.trim();
    },
    handleInputBlur(row) {
      // 失去焦点时将当前单元格的 editable 属性设置为 false
      updateGoods(row).then(res=>{
        this.getList()
      })
    },
    getGoodsAccessoryList(){
      this.goodsAccessoryListLoading=true
      this.drawer = true
      goodsAccessoryList(this.goodsAccessoryQuery).then(res=>{
        this.goodsAccessoryQuery.list=res.data.data.list
        this.goodsAccessoryQuery.total=res.data.data.total
        this.goodsAccessoryQuery.page=res.data.data.pageNum
        this.goodsAccessoryQuery.limit=res.data.data.pageSize
        this.goodsAccessoryListLoading=false
      }).catch(() => {
        this.goodsAccessoryQuery.list = []
        this.goodsAccessoryQuery.total = 0
        this.goodsAccessoryListLoading=false
      })
    },
    //点击复选框触发，复选框样式的改变
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //点击行触发，选中或不选中复选框
    handleRowClick(row, column, event) {
      this.$refs.handSelectTest_multipleTable.toggleRowSelection(row);
    },
    handleBatchesRemoveDelete(){
      const arr=[]
      //遍历点击选择的对象集合，拿到每一个对象的id添加到新的集合中
      this.multipleSelection.forEach(row=>arr.push(row.id))
      this.$confirm(this.$t('Confirm_Delete?'), {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
        type: 'success',
        callback: action => {
          if (action === 'confirm') {
            //批量删除
            goodsAccessoryBatchesRemove(arr).then(response => {
              this.$notify({
                title: this.$t('Success!'),
                message: this.$t('Deleted'),
                type: 'success',
                duration: 2000
              })
              this.getGoodsAccessoryList()  //重新加载页面的方法
            }).catch(response => {
              this.$notify.error({
                title: this.$t('Failed'),
                message: this.$t(response.data.errmsg)
              })
            })
          }
        }
      })
    },
    handleGoodsAccessoryDelete(row) {
      this.$confirm(this.$t('Confirm_Delete?'), this.$t('Hint'), {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
        type: 'warning'
      }).then(() => {
        goodsAccessoryRemove(row.id).then(response => {
          this.$notify.success({
            title: this.$t('Success!'),
            message: this.$t('Deleted')
          })
          const index = this.list.indexOf(row)
          this.list.splice(index, 1)
          this.getGoodsAccessoryList()
        }).catch(response => {
          this.$notify.error({
            title: this.$t('Failed'),
            message: this.$t(response.data.errmsg)
          })
        })
      });
    },
    handleClose(done) {
      done();
    },
    reviewFilter(review) {
      return this.reviewMap[review]
    },
    getList() {
      this.listLoading = true
      listGoods(this.listQuery).then(response => {
        // console.log(response.data.data.list)
        this.list = response.data.data.list
        this.total = response.data.data.total

        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleCreate() {
      this.$router.push({ path: '/goods/create' })
    },
    handleUpdate(row) {
      this.$router.push({ path: '/goods/edit', query: { id: row.id }})
    },
    showDetail(detail) {
      this.goodsDetail = detail
      this.detailDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm(this.$t('Confirm_Delete?'), this.$t('Hint'), {
        confirmButtonText: this.$t('Confirm'),
        cancelButtonText: this.$t('Cancel'),
        type: 'warning'
      }).then(() => {
        this.doDelete(row)
      });
    },
    doDelete(row){
      deleteGoods(row).then(response => {
        this.$notify.success({
          title: this.$t('Success!'),
          message: this.$t('Deleted')
        })
        const index = this.list.indexOf(row)
        this.list.splice(index, 1)
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    handleCopy(row) {
      const goodsId = row.id
      let loadingInstance = Loading.service({
        text: this.$t('Copying')
      });
      goodsCopy(goodsId).then(response => {
        this.$nextTick(() => {
          loadingInstance.close();
        });

        const newGoodsId = response.data.data.goods.id
        this.$notify.success({
          title: this.$t('Success!'),
          message: this.$t('Creation_successful')
        })
        this.$router.push({ path: '/goods/edit', query: { id: newGoodsId }})
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['商品ID', '商品编号', '名称', '专柜价格', '当前价格', '是否新品', '是否热品', '是否在售', '首页主图', '宣传图片列表', '商品介绍', '详细介绍', '商品图片', '商品单位', '关键字', '类目ID', '品牌商ID']
        const filterVal = ['id', 'goodsSn', 'name', 'counterPrice', 'retailPrice', 'isNew', 'isHot', 'isOnSale', 'listPicUrl', 'gallery', 'brief', 'detail', 'picUrl', 'goodsUnit', 'keywords', 'categoryId', 'brandId']
        excel.export_json_to_excel2(tHeader, this.list, filterVal, '商品信息')
        this.downloadLoading = false
      })
    },
    handleLog(row) {
      this.$router.push({ path: '/goods/logs', query: { id: row.id }})
    },
    handleReview(row) {
      this.reviewForm.goodsName = row.name
      this.reviewForm.id = row.id
      this.reviewForm.goodsSn = row.goodsSn
      this.reviewDialogVisiable = true
    },
    reviewHandlePass(){
      this.reviewForm.type = 2
      approveGoods(this.reviewForm).then(res=>{
        this.$notify.info({
          title: this.$t('Success!'),
          message: this.$t('操作成功')
        })
        this.getList()
        this.reviewDialogVisiable = false
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    reviewHandleReject(){
      this.reviewForm.type = 3
      rejectGoods(this.reviewForm).then(res=>{
        this.$notify.info({
          title: this.$t('Success!'),
          message: this.$t('操作成功')
        })
        this.getList()
        this.reviewDialogVisiable = false
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    isShowReview(reviewType){
      if(reviewType != 2){
        return false
      }else{
        return true;
      }
    },
    handlePush(row){
      const goodsDto = {
        isOnSale: row.isOnSale,
        id: row.id
      }
      pushGoods(goodsDto).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
      }).catch(response => {
        row.isOnSale = false
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t('商品尚未审核，或未配置')
        })
      })
    },
    getShopName(shopId){
      if(this.shops){
        let shop =  this.shops.find(shop =>{
          if(shop.id == shopId){
            return true
          }
        })
        if(shop){
          return shop.name
        }else{
          return this.$t('总部所有')
        }
      }
    },
    handleNewProduce(row){
      const goodsDto = {
        isNew: row.isNew,
        id: row.id
      }
      newProductGoods(goodsDto).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
      }).catch(response => {
        row.isNew = false
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    handleRecommend(row){
      const goodsDto = {
        isHot: row.isHot,
        id: row.id
      }
      recommendGoods(goodsDto).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
      }).catch(response => {
        row.isHot = false
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    handlePermission(value){
      return !checkPermission(value)
    },
    handleUpdatePrice(){
      let data = {
        id: this.priceForm.id,
        price: this.priceForm.goodsSellPrice
      }
      updatePriceGoods(data).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
        this.getList()
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    handleUpdateSpecPrice(row){
      let data = {
        id: row.id,
        price: row.price
      }
      updateSpecPriceGoods(data).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
        this.getList()
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    getPriceDetail(row){
      let param = {
        goodsId: row.id,
        shopId: row.shopId
      }
      getAllPriceGoods(param).then(response=>{
        // console.log(response.data.data)
        this.priceForm.id = response.data.data.id
        this.priceForm.goodsSn = response.data.data.goodsSn
        this.priceForm.goodsName = response.data.data.goodsName
        this.priceForm.goodsSellPrice = response.data.data.goodsSellPrice
        this.priceForm.priceType = response.data.data.priceType+""
        this.priceForm.specifications = response.data.data.specifications
        this.priceForm.vipGoodsPrice = response.data.data.vipGoodsPrice
        this.priceForm.moneyOfPriceForms = response.data.data.maxMinusPrices || [{}]
        this.priceForm.stepPriceForms = response.data.data.ladderPrices || [{}]
        this.priceDialogVisiable = true
      })
    },
    clearPriceForm(){
      this.priceDialogVisiable = false
      this.priceForm.vipGoodsPrice = {}
      this.priceForm.moneyOfPriceForms = [{}]
      this.priceForm.stepPriceForms = [{}]
/*      this.priceForm = {
        id: undefined,
        goodsName: undefined,
        goodsSellPrice: undefined,
        specifications: []
      }*/
    },
    handleUpdateStore(){
      updateStoreGoods(this.storeForm).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
        this.storeDialogVisiable = false
        this.getList()
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    getStoreDetail(row){
      this.storeForm.id = row.id
      this.storeForm.number = row.number
      this.storeForm.goodsName = row.name
      this.storeDialogVisiable = true
    },

    handleTabSwitch: function(tab){
      if(tab.name == 1){
        this.priceForm.priceType = '1'
        // this.priceForm.moneyOfPriceForms = [{}]
        // this.priceForm.stepPriceForms = [{}]
      }else if(tab.name == 2){
        this.priceForm.priceType = '2'
        // this.priceForm.vipPriceForm = {}
        // this.priceForm.moneyOfPriceForms = [{}]
      }else{
        this.priceForm.priceType = '3'
        // this.priceForm.vipPriceForm = {}
        // this.priceForm.stepPriceForms = [{}]
      }
    },
    handleStepAdd(row){
      this.priceForm.stepPriceForms.push({
        number:undefined,
        price:undefined
      })
    },
    handleStepDelete(scope){
      if(this.priceForm.stepPriceForms.length > 1){
        this.priceForm.stepPriceForms.splice(scope.$index,1)
      }else{
        this.priceForm.stepPriceForms[0] = {
          number:undefined,
          price:undefined
        }
      }
    },
    handleMoneyOfAdd(row){
      this.priceForm.moneyOfPriceForms.push({
        maxPrice:undefined,
        minusPrice:undefined
      })
    },
    handleMoneyOfDelete(scope){
      if(this.priceForm.moneyOfPriceForms.length > 1){
        this.priceForm.moneyOfPriceForms.splice(scope.$index,1)
      }else{
        this.priceForm.moneyOfPriceForms[0] = {
          maxPrice:undefined,
          minusPrice:undefined
        }
      }
    },
    handleUpdateDiscountPrice(){
      let goodsAllinone = {
        goods: {
          id: this.priceForm.id,
          priceType: this.priceForm.priceType
        }
      }
      if(this.priceForm.priceType == 1){
        goodsAllinone.vipPrice = this.priceForm.vipPriceForm
      }
      if(this.priceForm.priceType == 2){
        goodsAllinone.ladderPrices = this.priceForm.stepPriceForms
      }
      if(this.priceForm.priceType == 3){
        this.maxMinusPrices = this.priceForm.moneyOfPriceForms
      }
      updateGoodsDiscountPrice(goodsAllinone).then(res=>{
        this.$notify.success({
          title: this.$t('Success!'),
          message: '修改成功'
        })
        this.storeDialogVisiable = false
        this.getList()
      }).catch(response => {
        this.$notify.error({
          title: this.$t('Failed'),
          message: this.$t(response.data.errmsg)
        })
      })
    },
    handleUpdateProduct(){
      this.taxes.forEach(tax=>{
        if(tax.enable && this.productForm.taxTypes.indexOf(tax) < 0){
          this.productForm.taxTypes.push(tax.type)
        }
      })
      this.$refs['productForm'].validate((validproduct) => {
        if(validproduct){
          if(this.productForm.id){
            updateGoodsProduct(this.productForm).then(response=>{
              this.$notify.success({
                title: this.$t('Success!'),
                message: '修改成功'
              })
              this.productDialogVisiable = false
              this.getList()
            })
          }else{
            addGoodsProduct(this.productForm).then(response=>{
              this.$notify.success({
                title: this.$t('Success!'),
                message: '修改成功'
              })
              this.productDialogVisiable = false
              this.getList()
            })
          }
        }
      })

    },
    filterTaxType(type){
      if(type == 1){
        return this.$t('国税')
      }else if(type == 2){
        return this.$t('省税')
      }else if(type == 3){
        return this.$t('地方税')
      }
    },
    getProductDetail(goods){
      readGoodsProduct({goodsId: goods.id}).then(response=>{
        if(response.data.data.length > 0){
          this.productForm = response.data.data[0]
          this.productForm.goodsName = goods.name
          if(this.productForm.taxTypes){
            this.taxes.forEach(tax=>{
              if(this.productForm.taxTypes.indexOf(tax.type) >= 0){
                tax.enable = true
              }else{
                tax.enable = false
              }
            })
          }
        }
        this.productDialogVisiable = true
      })
    },
    handleCategoryChange(value) {
      this.listQuery.categoryl3 = (value && value.length > 0) ? value[value.length - 1] : '';
    },
    getIndex(index) {
      return (index + 1) + (this.listQuery.page - 1) * this.listQuery.limit;
    }
  }
}
</script>


<style>



  .table-expand {
    font-size: 0;
  }
  .table-expand label {
    width: 100px;
    color: #99a9bf;
  }
  .table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
  }
  .gallery {
    width: 80px;
    margin-right: 10px;
  }
</style>
